<!--年周，没有ID-->
<template>
  <el-date-picker
    v-model="mydate"
    v-bind="$attrs"
    type="week"
    :name="'c' + meta.columnId"
    :format="format"
    :clearable="clearable"
    @change="myChange"
  >
  </el-date-picker>
</template>

<script setup lang="ts" generic="T extends object">
  import { ref, watch } from 'vue'

  import dayjs from 'dayjs'

  import isoWeeksInYear from 'dayjs/plugin/isoWeeksInYear'
  import isLeapYear from 'dayjs/plugin/isLeapYear' // dependent on isLeapYear plugin

  import isoWeek from 'dayjs/plugin/isoWeek'

  import type { IFormChildProps } from '../map'
  import { itemController, EControlType } from '../map'
  dayjs.extend(isoWeek)
  dayjs.extend(isoWeeksInYear)
  dayjs.extend(isLeapYear)
  
  defineOptions({
    name: 'nf-el-from-item-week',
    inheritAttrs: false,
  })

/**
 * 日期管理类
 * * 功能：
 * ** 按照类型提交数据，不是date()
 * ** 监听属性，设置value
 * * 参数：
 * ** value： control类的value
 * ** mySubmit： control类的mySubmit，直接就提交了
 * ** controlType：属性里的控件类型
 * * 返回
 * ** 绑定控件的 mydate
 * ** change 事件的 myChange  value instanceof Date
 */
const dateManage = (value, props) => {
  // 日期控件用的v-model，便于做类型转换
  const mydate = ref<string | Date>('')
  value.value = '' // dayjs(mydate.value).format(props.returnFormat)

  // let myweek = ref(0)
  // myweek.value = dayjs('2022-01-03').isoWeek() // isoWeeksInYear
  // 周几 和 年月日的对应
  const dic = {
    1: (year: number) => new Date(year + '-01-01'),
    2: (year: number) => new Date((year - 1) + '-12-31'),
    3: (year: number) => new Date((year - 1) + '-12-30'),
    4: (year: number) => new Date((year - 1) + '-12-29'),
    5: (year: number) => new Date(year + '-01-04'),
    6: (year: number) => new Date(year + '-01-03'),
    0: (year: number) => new Date(year + '-01-02')

  }
  // 把 2021xx 的形式变成 date 类型
  const weekToDate = (week) => {
    if (week === '' || week === 0) {
      return new Date()
    }
    // 拆分week
    const year = week.substr(0, 4)
    const w = week.substr(week.length - 2, 2)

    // 计算一月一号是周几
    const dayOfWeek = new Date(year + '-01-01').getDay()
    // 计算第一周的第一天是几号。
    const firstDay = dic[dayOfWeek](parseInt(year))

    // 按照周数计算日期
    return dayjs(firstDay).add(7 * (w - 1), 'day').toDate()
  }

  // 监听属性，设置给 mydate
  watch(() => value.value, (v1, v2) => {
    // 把周数转换成日期
    // mydate.value = v1
    if (v1 === '') {
      mydate.value = ''
    } else {
      mydate.value = weekToDate(v1)
    }
  }, {immediate: true})

  // 向父组件提交数据。
  const myChange = (val) => {
    if (val === null) {
      // 清空的情况
      value.value = ''
    } else {
      // 获取本年里第几周 日历取的是周日，但是从周一开始 .add(1, 'day')
      const wk: string = dayjs(val).add(1, 'day').isoWeek().toString()

      const year = val.getFullYear()
      const re = year.toString() + ' ' + wk.padStart(2, '0')
      value.value = re
      // 强制修改 显示的 年周
      document.getElementsByName('c' + props.meta.columnId)[0].value = re

    }
  }

  return {
    mydate,
    myChange
  }
}


  const props = withDefaults(defineProps<IFormChildProps<T> & {
    format?: string,
    valueFormat?: string,
  }>(), {
    meta: () => {
      return {
        colName: '',
        controlType: EControlType.week
      }
    },
    model: () => {
      return {} as T
    },
    clearable: true,
    format: 'YYYY-MM-DD',
    valueFormat: 'YYYY-MM-DD'
  })
 
  const { value } = itemController(props)
  
  const {
    mydate,
    myChange
  } = dateManage(value, props)
    
</script>
